In [ ]:
from __future__ import print_function
from bqplot import *
import numpy as np
import pandas as pd
from ipywidgets import Layout

Scatter Chart

Scatter Chart Selections

Click a point on the Scatter plot to select it. Now, run the cell below to check the selection. After you've done this, try holding the ctrl (or command key on Mac) and clicking another point. Clicking the background will reset the selection.


In [ ]:
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(20)
y_data = np.random.randn(20)

scatter_chart = Scatter(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, colors=['dodgerblue'],
                       interactions={'click': 'select'},
                        selected_style={'opacity': 1.0, 'fill': 'DarkOrange', 'stroke': 'Red'},
                       unselected_style={'opacity': 0.5})

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[scatter_chart], axes=[ax_x, ax_y])

In [ ]:
scatter_chart.selected

Alternately, the selected attribute can be directly set on the Python side (try running the cell below):


In [ ]:
scatter_chart.selected = [1, 2, 3]

Scatter Chart Interactions and Tooltips


In [ ]:
from ipywidgets import *

In [ ]:
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(20)
y_data = np.random.randn(20)

dd = Dropdown(options=['First', 'Second', 'Third', 'Fourth'])
scatter_chart = Scatter(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, colors=['dodgerblue'],
                       names=np.arange(100, 200), names_unique=False, display_names=False, display_legend=True,
                       labels=['Blue'])
ins = Button(icon='fa-legal')
scatter_chart.tooltip = ins

scatter_chart2 = Scatter(x=x_data, y=np.random.randn(20), 
                         scales= {'x': x_sc, 'y': y_sc}, colors=['orangered'],
                         tooltip=dd, names=np.arange(100, 200), names_unique=False, display_names=False, 
                         display_legend=True, labels=['Red'])

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[scatter_chart, scatter_chart2], axes=[ax_x, ax_y])

In [ ]:
def print_event(self, target):
    print(target)

# Adding call back to scatter events
# print custom mssg on hover and background click of Blue Scatter
scatter_chart.on_hover(print_event)
scatter_chart.on_background_click(print_event)

# print custom mssg on click of an element or legend of Red Scatter
scatter_chart2.on_element_click(print_event)
scatter_chart2.on_legend_click(print_event)

In [ ]:
# Adding figure as tooltip
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(10)
y_data = np.random.randn(10)

lc = Lines(x=x_data, y=y_data, scales={'x': x_sc, 'y':y_sc})
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')
tooltip_fig = Figure(marks=[lc], axes=[ax_x, ax_y], layout=Layout(min_width='600px'))

scatter_chart.tooltip = tooltip_fig

In [ ]:
# Changing interaction from hover to click for tooltip
scatter_chart.interactions = {'click': 'tooltip'}

Line Chart


In [ ]:
# Adding default tooltip to Line Chart
x_sc = LinearScale()
y_sc = LinearScale()

x_data = np.arange(100)
y_data = np.random.randn(3, 100)

def_tt = Tooltip(fields=['name', 'index'], formats=['', '.2f'], labels=['id', 'line_num'])
line_chart = Lines(x=x_data, y=y_data, scales= {'x': x_sc, 'y': y_sc}, 
                       tooltip=def_tt, display_legend=True, labels=["line 1", "line 2", "line 3"] )

ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[line_chart], axes=[ax_x, ax_y])

In [ ]:
# Adding call back to print event when legend or the line is clicked
line_chart.on_legend_click(print_event)
line_chart.on_element_click(print_event)

Bar Chart


In [ ]:
# Adding interaction to select bar on click for Bar Chart
x_sc = OrdinalScale()
y_sc = LinearScale()

x_data = np.arange(10)
y_data = np.random.randn(2, 10)

bar_chart = Bars(x=x_data, y=[y_data[0, :].tolist(), y_data[1, :].tolist()], scales= {'x': x_sc, 'y': y_sc},
                 interactions={'click': 'select'},
                 selected_style={'stroke': 'orange', 'fill': 'red'},
                 labels=['Level 1', 'Level 2'],
                 display_legend=True)
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[bar_chart], axes=[ax_x, ax_y])

In [ ]:
# Adding a tooltip on hover in addition to select on click
def_tt = Tooltip(fields=['x', 'y'], formats=['', '.2f'])
bar_chart.tooltip=def_tt
bar_chart.interactions = {
    'legend_hover': 'highlight_axes',
    'hover': 'tooltip', 
    'click': 'select',
}

In [ ]:
# Changing tooltip to be on click
bar_chart.interactions = {'click': 'tooltip'}

In [ ]:
# Call back on legend being clicked
bar_chart.type='grouped'
bar_chart.on_legend_click(print_event)

Histogram


In [ ]:
# Adding tooltip for Histogram
x_sc = LinearScale()
y_sc = LinearScale()

sample_data = np.random.randn(100)

def_tt = Tooltip(formats=['', '.2f'], fields=['count', 'midpoint'])
hist = Hist(sample=sample_data, scales= {'sample': x_sc, 'count': y_sc},
                       tooltip=def_tt, display_legend=True, labels=['Test Hist'], select_bars=True)
ax_x = Axis(scale=x_sc, tick_format='0.2f')
ax_y = Axis(scale=y_sc, orientation='vertical', tick_format='0.2f')

Figure(marks=[hist], axes=[ax_x, ax_y])

In [ ]:
# Changing tooltip to be displayed on click
hist.interactions = {'click': 'tooltip'}

In [ ]:
# Changing tooltip to be on click of legend
hist.interactions = {'legend_click': 'tooltip'}

Pie Chart


In [ ]:
pie_data = np.abs(np.random.randn(10))

sc = ColorScale(scheme='Reds')
tooltip_widget = Tooltip(fields=['size', 'index', 'color'], formats=['0.2f', '', '0.2f'])
pie = Pie(sizes=pie_data, scales={'color': sc}, color=np.random.randn(10), 
          tooltip=tooltip_widget, interactions = {'click': 'tooltip'}, selected_style={'fill': 'red'})

pie.selected_style = {"opacity": "1", "stroke": "white", "stroke-width": "2"}
pie.unselected_style = {"opacity": "0.2"}

Figure(marks=[pie])

In [ ]:
# Changing interaction to select on click and tooltip on hover
pie.interactions = {'click': 'select', 'hover': 'tooltip'}

In [ ]:


In [ ]: